<template>
  <view class="s-tabs">
    <view class="s-tabs__wrapper">
      <view 
        v-for="(item, index) in list" 
        :key="index"
        class="s-tabs__wrapper__nav-item"
        :class="{'s-tabs__wrapper__nav-item--active': modelValue === item.value}"
        @tap="onClick(item.value)"
      >
        {{ item.name }}
      </view>
    </view>
    <slot></slot>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  // 标签页数据
  list: {
    type: Array,
    default: () => []
  },
  // 当前选中标签的索引
  modelValue: {
    required: true
  }
})

const emit = defineEmits(['update:modelValue', 'change'])

// 点击标签时触发
const onClick = (value) => {
  if (value === props.modelValue) return;
  emit('update:modelValue', value)
  emit('change', {
    value
  })
}
</script>

<style lang="scss" scoped>
.s-tabs {
  &__wrapper {
    display: flex;
    position: relative;
    
    &__nav-item {
      padding: 6px 8px;
      flex: 1;
      text-align: center;
      font-size: 14px;
      color: #666;
      transition: all 0.3s;
      cursor: pointer;

      &--active {
        color: #ff6000;
        font-weight: bold;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 20px;
          height: 2px;
          background: #ff6000;
          border-radius: 2px;
        }
      }
    }
  }
}
</style>